@import'flex';
.navigation {
    list-style: none;
    margin: 0;
    background: deepskyblue;
    @extend .sn-flex.h-right;
}
.navigation a {
    text-decoration: none;
    display: block;
    padding: 1em;
    color: white;
}
.navigation a:hover {
    background: darken(deepskyblue, 2%);
}
@media all and (max-width: 800px) {
    .navigation {
        //最新的sass版本尚不支持在@media内部引用@extend
        //@extend .sn-flex.h-around;
        -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }
}
@media all and (max-width: 600px) {
    .navigation {
        -webkit-flex-flow: column wrap;
        flex-flow: column wrap;
        padding: 0;
    }
    .navigation a {
        text-align: center;
        padding: 10px;
        border-top: 1px solid rgba(255,255,255,0.3);
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    .navigation li:last-of-type a {
        border-bottom: none;
    }
}